<template>
  <view class="container">
    <view @tap="openForm" class="create-btn">
      <u-icon color="#999999" name="plus" :size="28"></u-icon>
      <view class="text">创作文案</view>
    </view>
    <view class="result">
      <view class="section">
        <view class="line-bar"></view>
        <view class="title">输出结果</view>
      </view>
    </view>
    <u-empty
        icon="../../static/emptyNew.png"
        :iconSize="46"
        style="padding: 60rpx 0"
        text="未创作文案"
        v-if="$root.g0 === 0"
    ></u-empty>
    <view class="list" v-else>
      <view class="item" v-for="(item, index) in $root.l0" :key="index">
        <view class="text">{{ item[$orig].value }}</view>

        <view class="bottom">
          <view class="length">{{ item.g1 + '字符' }}</view>
          <view class="add">
            <u-icon
                @click="toggleSelected(item)"
                color="#666666"
                name="minus-circle"
                size="20"
                v-if="item.g2"
            ></u-icon>
            <u-icon
                @click="toggleSelected(item)"
                color="#0291FB"
                name="plus-circle"
                size="20"
                v-else
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view @tap="" class="icon">
        <u-badge :absolute="true" max="99" :offset="[0, 12]" style="z-index: 1" :value="$root.g3"></u-badge>
        <u-icon name="order" size="30"></u-icon>
      </view>
      <u-button
          @click="confirm"
          shape="circle"
          text="确定"
          type="primary"
      ></u-button>
    </view>
    <u-popup
        @close="close"
        :closeable="true"
        mode="bottom"
        :round="12"
        :show="selectedPickerShow"
    >
      <view class="selected-wrap">
        <view class="popup-title">已选文案</view>
        <u-empty
            :iconSize="46"
            style="padding: 60rpx 0"
            text="未添加文案"
            v-if="$root.g4 === 0"
        ></u-empty>
        <view class="list" v-else>
          <view class="item" v-for="(item, index) in $root.l1" :key="index">
            <view class="text">{{ item[$orig].value }}</view>

            <view class="bottom">
              <view class="length">{{ item.g5 + '字符' }}</view>
              <view @tap="delItemByIndex(index)" class="add">
                <u-icon
                    color="#666666"
                    name="minus-circle"
                    size="20"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="footer">
          <u-button
              @click="e3"
              shape="circle"
              style="background-color: #f4f5f5; color: #666666; border: none"
              text="取消"
              type="primary"
          ></u-button>
          <u-button
              @click="confirm"
              shape="circle"
              text="确定"
              type="primary"
          ></u-button>
        </view>
      </view>
    </u-popup>
    <u-popup
        @close="closeForm"
        :closeable="true"
        mode="bottom"
        :round="12"
        :show="formShow"
    >
      <view class="form-wrap">
        <view class="title">填写关键词</view>
        <view class="form">
          <u--form
              ref="uForm"
              labelPosition="left"
              :labelStyle="{color:'#666666', height:'60rpx'}"
              labelWidth="auto"
          >
            <view class="item" v-for="(item, index) in formConfig" :key="index">
              <u-form-item
                  :borderBottom="true"
                  :label="item.label"
              >
                <view @tap="formItemClick(item)" style="width: 100%">
                  <u-input
                      border="none"
                      :disabled="item.type === 'radio'"
                      disabledColor="#ffffff"
                      inputAlign="right"
                      :placeholder="item.placeholder"
                      placeholderStyle="color: #999999"
                      :style="'pointer-events:' + (item.type === 'radio' || item.type === 'multi' ? 'none' : '') + ';'"
                      :value="item.value"
                  ></u-input>
                </view>
                <u-icon
                    @click="formItemClick(item)"
                    name="arrow-right"
                    slot="right"
                    v-if="item.type === 'radio' || item.type === 'multi'"
                ></u-icon>
              </u-form-item>
            </view>
          </u--form>
        </view>
        <view class="footer">
          <u-button
              @click="closeForm"
              shape="circle"
              style="background-color: #f4f5f5; color: #666666; border: none"
              text="取消"
              type="primary"
          ></u-button>
          <u-button
              @click="create"
              shape="circle"
              text="确定"
              type="primary"
          ></u-button>
        </view>
        <u-picker
            @cancel="e6"
            @close="e7"
            @confirm="currentPickerConfirm"
            :closeOnClickOverlay="true"
            :columns="radioPickerColumns"
            :show="showCurrentPicker"
        ></u-picker>
        <u-popup
            @close="e8"
            :closeable="true"
            round="10"
            :show="showMultiplePopup"
        >
          <view class="popup-wrap">
            <view class="title">请选择</view>
            <view class="check-list">
              <view
                  @tap="toggleCheckMultiple"
                  class="item u-border-bottom"
                  v-for="(item, index) in $root.l2"
                  :key="index"
              >
                <view class="label">{{ item[$orig] }}</view>
                <view class="check-box">
                  <image mode="widthFix" src="/static/pay/checked.png" v-if="item.g6 > -1"></image>
                  <image mode="widthFix" src="/static/pay/check-default.png" v-else></image>
                </view>
              </view>
            </view>
            <view class="actions">
              <u-button
                  @click="e9"
                  class="btn"
              >
                取消
              </u-button>
              <u-button
                  @click="multiConfirm"
                  class="btn confirm-btn"
              >
                确定
              </u-button>
            </view>
          </view>
        </u-popup>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedPickerShow: false,
      selectedList: [],
      formShow: false,
      formConfig: [],
      currentFormItem: {},
      showCurrentPicker: false,
      radioPickerColumns: [],
      showMultiplePopup: false,
      multiplePopupColumns: [],
      multiplePopupChecked: [],
      eventChannel: null,
      resultList: []
    };
  },
  created() {
    this.$util.request({
      url: '/app_video/get_script',
    }).then(res => {
      this.formConfig = res.data;
    })
  },
  onLoad() {
    this.eventChannel = this.getOpenerEventChannel();
  },
  methods: {
    toggleSelected(e) {
      var selected = this.selectedList.find(item => {
        return item.id === e.id;
      })
      if (selected) {
        this.selectedList = this.selectedList.filter(item => {
          return item.id !== e.id;
        });
      } else {
        this.selectedList.push(e);
      }
    },
    delItemByIndex(e) {
      this.selectedList.splice(e, 1);
    },
    openForm() {
      this.formShow = true
    },
    closeForm() {
      this.formShow = false
    },
    formItemClick(e) {
      this.currentFormItem = e;
      if ('radio' === e.type) {
        this.radioPickerColumns = [e.options]
        this.showCurrentPicker = true
      } else {
        if ('multi' === e.type) {
          this.multiplePopupColumns = e.options
          this.showMultiplePopup = true
          if (this.currentFormItem.value) {
            this.multiplePopupChecked = this.currentFormItem.value.split(',')
          }
        }
      }
    },
    toggleCheckMultiple(e) {
      var index = this.multiplePopupChecked.findIndex(item => {
        return e === item;
      });
      index > -1 ? this.multiplePopupChecked.splice(index, 1) : this.multiplePopupChecked.push(e);
    },
    currentPickerConfirm(e) {
      this.currentFormItem.value = e.value[0];
      this.showCurrentPicker = false;
    },
    multiConfirm() {
      this.currentFormItem.value = this.multiplePopupChecked.join(',');
      this.showMultiplePopup = false;
    },
    create() {
      var checkPass = true;
      this.formConfig.forEach(item => {
        item.value || (checkPass = false);
      });
      if (checkPass) {
        var param = {};
        this.formConfig.forEach(item => {
          param[item.key] = item.value;
        });
        this.$util.request({
          url: '/app_video/create_task',
          data: param,
          loadingText: 'AI生成中...'
        }).then(res => {
          this.loopCheckState(res.data.job_id);
        })
      } else {
        this.$util.message('请填写完整');
      }
    },
    loopCheckState(job_id) {
      this.$util.request({
        url: '/app_video/get_job_state',
        data: {
          task_id: job_id
        }
      }).then(res => {
        if (res.data.status === 0) {
          setTimeout(() => {
            this.loopCheckState(t);
          }, 1000)
          return
        }
        if (res.data.status === 1) {
          uni.hideLoading()
          this.resultList = res.data.content
          this.formShow = false
          return
        }
        if (res.data.status === 2) {
          this.$util.message(res.msg || '创作失败')
          return
        }
      });
    },
    confirm() {
      this.eventChannel.emit('selected', this.selectedList);
      uni.navigateBack();
    }
  }
}
</script>
<style scoped>
@import './index.css';
</style>
